<template>
    <div class="body">
        <header>
            <van-image width="70" height="70" :src="userImage" round="fill" />
            <span @click="goMyProfile">{{ userName }}</span>
        </header>
        <section>
            <div>
                <div id="coupon">
                    <div><span>0</span>张</div>
                    <div>卖座券</div>
                </div>
                <div id="money">
                    <div>¥<span>0</span></div>
                    <div>余额
                    </div>
                </div>
            </div>
            <van-cell-group v-for="data in systemList" :key="data.id">
                <van-cell :title="data.title" is-link :to="data.to">
                    <template #icon>
                        <van-icon :name="data.icon.name" :color="data.icon.color" style="transform: translate(-4px,4px);" />
                    </template>
                </van-cell>
            </van-cell-group>


        </section>
    </div>
</template>

<script setup>
import { onBeforeMount, onMounted, ref } from 'vue'
import { onBeforeRouteLeave } from "vue-router"
import { Cell as vanCell, CellGroup as vanCellGroup, Icon as vanIcon, Image as VanImage, Button as vanButton } from 'vant';
import { useRouter } from 'vue-router'


const router = useRouter()
const userInfo = ref({})
const userName = ref('')
const userImage = ref('')

const goMyProfile = () => {
    if (localStorage.getItem('userInfo')) router.push('./user')
    else router.push('./login')
}
const systemList = ref([
    {
        id: 1,
        title: '电影订单',
        icon: {
            name: 'coupon',
            color: '#FFC82F',
        },
        to: 'movieorders',
    },
    {
        id: 2,
        title: '组合红包',
        icon: {
            name: 'bill-o',
            color: '#BAA27A',
        },
        to: 'redenvelope',
    },
    {
        id: 3,
        title: '历史记录',
        icon: {
            name: 'clock-o',
            color: '#FFC229',
        },
        to: 'records',
    },
    {
        id: 4,
        title: '帮助与客服',
        icon: {
            name: 'service-o',
            color: '#A2C0D6',
        },
        to: 'helpserve',
    },
    {
        id: 5,
        title: '设置',
        icon: {
            name: 'setting-o',
            color: '#D5E096',
        },
        to: 'system',
    },
])


onBeforeMount(() => {
    let isAuthenticated = localStorage.getItem('userInfo')
    if (isAuthenticated && Object.prototype.toString.call(JSON.parse(isAuthenticated)) === '[object Object]') {
        userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
        userName.value = userInfo.value.nickname
        userImage.value = userInfo.value.avatarUrl
    } else {
        userName.value = '立即登录'
        userImage.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
    }
})
onMounted(() => {
    let State = localStorage.getItem("HomeState")
    //第一次进入页面刷新一次，仅一次
    if (State == '1') {
        //修改HomeState的值为0，使页面不再重复刷新
        localStorage.setItem("HomeState", '0')
        location.reload();
    }
})
</script>

<script>
// export default {
//     async beforeRouteEnter(to, from, next) {
//         let isAuthenticated = await localStorage.getItem('token')
//         if (!isAuthenticated) next({ name: "Login", })
//         else next()
//     },
// }
</script>




<style scoped lang="scss">
#app>div,
.body {
    height: 100%;
    background-color: #F4F4F4;
}

.group_head.van-cell>.van-cell__value>span {
    color: red !important;
}

header {
    background: #FF8226 url('https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png') 0px -30px/100%;

    height: 40vw;
    display: flex;
    align-items: center;
    justify-content: left;
    color: #fff;

    &>:nth-child(1) {
        margin-left: 30px;
        margin-right: 20px;
    }

}

section {
    &>:nth-child(1) {
        background-color: #fff;
        display: flex;
        margin-bottom: 2vw;
        padding: 3vw 0px;
        justify-content: space-around;

        &>div {
            text-align: center;

            &>:nth-child(2) {
                color: #797D82;
                font-size: 12px;
            }
        }
    }
}
</style>